.page-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    li {
      width: 32%;
      background: white;
      border-radius: 4px;
      border: 1px solid #EBEEF5;
      box-shadow:0px 2px 0px rgba(189,189,189,0.1);
      text-align: center;
      .icon {
        margin-top: 90px;
        display: inline-block;
        width: 90px;
        height: 90px;
        background-color: #20A0FF;
        border-radius: 100%;
        line-height: 90px;
        text-align: center;
        color: white;
        i {
          font-size: 42px;
        }
      }
      h5 {
        margin-top: 25px;
        font-size:20px;
        color:rgba(48,49,51,1);
        line-height:20px;
      }
      p {
        margin-top: 15px;
        display: inline-block;
        width: 70%;
        font-size:14px;
        color:rgba(144,147,153,1);
      }
      .footer {
        cursor: pointer;
        margin-top: 88px;
        width: 100%;
        height: 56px;
        background: rgba(32,160,255,0.04);
        border-radius: 1px;
        border-top: 1px solid rgba(235,238,245,1);
        p {
          color: #20A0FF;
        }
      }
    }
    li.add-pro {
      .icon {
        background-color: #00B38A;
      }
      .footer {
        background:rgba(0,179,138,0.04);
        p {
          color: #00B38A;
        }
      }
    }
    li.examine {
      .icon {
        background-color: #F5A623;
      }
      .footer {
        background:rgba(245,166,35,0.04);
        p {
          color:#F5A623;
        }
      }
    }
  }
}
